import React, { PureComponent } from 'react';
import { Upload, Radio, Button, message } from 'antd';
import styles from './HandleFile.less';

// const CONST_FILE_TYPE = [
//     'application/vnd.ms-excel',
//     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
// ];
const CONST_FILE_TYPE = [
    'xls',
    'xlsx'
];

export default class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            active: '1'
        }
    }

    downloadData = (type) => {
        const { dispatch, modularName, currentUnit } = this.props;

        if (!currentUnit.id || currentUnit.id === -1) {
            message.error('请选择要导出人员数据的单位', 2);
        } else {
            dispatch({
                type: `${modularName}/downloadData`,
                payload: {
                    unitId: currentUnit.id,
                    type,
                    name: `人员信息(${currentUnit.unit_name || '全部单位'}).xls`
                }
            });
        }
    }

    render() {
        const { dispatch, loading, modularName } = this.props;
        const { active, state, errorNum, error } = this.state;
        const array = typeof error === 'string' ? error.split('<br/>') : [];

        const props = {
            accept: CONST_FILE_TYPE.join(','),
            fileList: [],
            beforeUpload: (file, fileList) => {
                const { currentUnit = {} } = this.props;

                if (!currentUnit.id || currentUnit.id === -1) {
                    message.error('请选择要导入人员数据的单位', 2);
                } else {
                    if (file) {
                        const { name, type } = file;
                        const fileType = name.substring(name.lastIndexOf('.') + 1);

                        if (CONST_FILE_TYPE.includes(fileType)) {
                            dispatch({
                                type: `${modularName}/uploadData`,
                                payload: {
                                    unitId: currentUnit.id,
                                    optType: this.state.active === '2' ? 'update' : 'insert',
                                    file,
                                    callback: (state, errorNum, error) => {
                                        this.setState({ state, errorNum, error });
                                    }
                                }
                            });
                        } else {
                            message.error('不支持的文件类型', 2);
                        }
                    }
                }

                return false;
            }
        };

        return (
            <div>
                <div className={styles.tab_wrapper}>
                    <Radio.Group value={this.state.active} buttonStyle='solid' onChange={e => this.setState({ active: e.target.value })}>
                        <Radio.Button value='1'>批量导入人员</Radio.Button>
                        <Radio.Button value='2'>导出/修改人员</Radio.Button>
                    </Radio.Group>
                </div>
                <div className={styles.content}>
                    {active === '1' &&
                        <>
                            <div className={styles.option}>
                                <div>
                                    <span>1.下载人员模板</span>
                                    <div className={styles.img_wrapper}>
                                        <img src='/img/fileType/download.png' />
                                        <div className={styles.desc}>

                                        </div>
                                        <div>
                                            <Button shape='round' size='large' loading={!!loading.effects[`${modularName}/downloadData`]} onClick={this.downloadData.bind(this, 'userModel')}>下载人员列表</Button>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <span>2.上传修改好的文件</span>
                                    <div className={styles.img_wrapper}>
                                        <img src='/img/fileType/upload.png' />
                                        <div className={styles.desc}>
                                            仅支持XLS、XLSX格式文件
                                        </div>
                                        <div>
                                            <Upload {...props}>
                                                <Button shape='round' size='large' type='primary' style={{ minWidth: 138 }} >选择文件</Button>
                                            </Upload>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.message}>
                                {state === '200' &&
                                    <div className={styles.success}>
                                        导入成功
                                    </div>
                                }
                                {state === '400' &&
                                    <div className={styles.error}>
                                        <div>
                                            导入完成{errorNum}
                                        </div>
                                        <ul>
                                            {Array.isArray(array) && array.map(item => {
                                                if (item) {
                                                    return <li>{item}</li>
                                                }
                                            })}
                                        </ul>
                                    </div>
                                }
                            </div>
                            <div className={styles.tips}>
                                <ul>
                                    <li>导入人员列表之前请先下载人员管理模板,根据模板录入人员。</li>
                                    <li>人员录入完成之后，上传人员文件导入平台。</li>
                                </ul>
                            </div>
                        </>
                    }
                    {active === '2' &&
                        <>
                            <div className={styles.option}>
                                <div>
                                    <span>1.导出人员信息</span>
                                    <div className={styles.img_wrapper}>
                                        <img src='/img/fileType/download.png' />
                                        <div className={styles.desc}>

                                        </div>
                                        <div>
                                            <Button shape='round' size='large' loading={!!loading.effects[`${modularName}/downloadData`]} style={{ minWidth: 138 }} onClick={this.downloadData.bind(this, 'userdata')}>导出</Button>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <span>2.上传修改好的文件</span>
                                    <div className={styles.img_wrapper}>
                                        <img src='/img/fileType/upload.png' />
                                        <div className={styles.desc}>
                                            仅支持XLS、XLSX格式文件
                                        </div>
                                        <div>
                                            <Upload {...props}>
                                                <Button shape='round' size='large' type='primary' style={{ minWidth: 138 }} loading={!!loading.effects[`${modularName}/uploadData`]}>选择文件</Button>
                                            </Upload>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.message}>
                                {state === '200' &&
                                    <div className={styles.success}>
                                        导入成功
                                    </div>
                                }
                                {state === '400' &&
                                    <div className={styles.error}>
                                        <div>
                                            导入完成{errorNum}
                                        </div>
                                        <ul>
                                            {Array.isArray(array) && array.map(item => {
                                                if (item) {
                                                    return <li>{item}</li>
                                                }
                                            })}
                                        </ul>
                                    </div>
                                }
                            </div>
                            <div className={styles.tips}>
                                <ul>
                                    <li>修改人员之前请先导出人员列表。</li>
                                    <li>人员录入完成之后，上传人员文件导入平台。</li>
                                    <li>人员导入后会覆盖原来的数据，请谨慎操作。</li>
                                </ul>
                            </div>
                        </>
                    }
                </div>
            </div>
        );
    }
}